import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createRouter, createWebHistory } from 'vue-router'
import Main from './views/Main.vue'
import Login from './views/Login.vue'
import Home from './views/Home.vue'
import MyTasks from './views/MyTasks.vue'
import AICustomerService from './views/AICustomerService.vue'
import TeamList from './views/TeamList.vue'
import TeamDetail from './components/TeamDetail.vue'
import CreateTeam from './components/CreateTeam.vue'
import ReviewApplications from './components/ReviewApplications.vue'
import MyTeams from './components/MyTeams.vue'
import MyTeamDetail from './components/MyTeamDetail.vue'
import TeamStats from './components/TeamStats.vue'
import UserProfile from './components/UserProfile.vue'
import ProfileDetail from './components/ProfileDetail.vue'
import EditProfilePage from './components/EditProfilePage.vue'
import BankCardManagePage from './components/BankCardManagePage.vue'
import MessageCenter from './views/MessageCenter.vue'
import AddBankCardPage from './views/AddBankCardPage.vue'
import SelectBankPage from './views/SelectBankPage.vue'
import { createPinia } from 'pinia'

const routes = [
  { path: '/', component: () => import('./views/Login.vue') },
  {
    path: '/main',
    component: Main,
    children: [
      { path: '', redirect: '/main/home' },
      { path: 'home', name: 'Home', component: Home },
      { path: 'my-tasks', name: 'MyTasks', component: MyTasks },
      { path: 'ai-service', name: 'AICustomerService', component: AICustomerService },
      { path: 'team', name: 'TeamList', component: TeamList },
      { path: 'profile', name: 'UserProfile', component: UserProfile },
    ],
    meta: { requiresAuth: true }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  { path: '/profile-detail', component: ProfileDetail },
  { path: '/edit-profile', component: EditProfilePage },
  { path: '/bank-manage', component: BankCardManagePage },
  { path: '/message-center', component: MessageCenter },
  { path: '/message-detail/:id', component: () => import('./views/MessageDetail.vue') },
  { path: '/bank-card-detail/:number', component: () => import('./views/BankCardDetail.vue') },
  { path: '/add-bank-card', component: AddBankCardPage },
  { path: '/select-bank', component: SelectBankPage },
  { path: '/team-detail/:id', name: 'TeamDetail', component: TeamDetail },
  { path: '/create-team', name: 'CreateTeam', component: CreateTeam },
  { path: '/review-applications', name: 'ReviewApplications', component: ReviewApplications },
  { path: '/my-teams', name: 'MyTeams', component: MyTeams },
  { path: '/my-team-detail/:id', name: 'MyTeamDetail', component: MyTeamDetail },
  { path: '/team-stats/:id', name: 'TeamStats', component: TeamStats },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'
  
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

const app = createApp(App)
app.use(ElementPlus)
app.use(createPinia())
app.use(router)
app.mount('#app')